<template>
	<div style="min-height: 120vh; position: relative; overflow-x: hidden">
		<topNavigation :linkMsg="linkMsg"></topNavigation>
		<div style="width: 100vw; display: flex; justify-content: center">
			<el-card
				shadow="always"
				style="width: 90vw; min-height: 20vh"
				v-if="pageShow"
				class="perspectiveUpReturn"
			>
				<template #header>
					<el-row style="display: flex; align-items: center">
						<el-col :span="2" :offset="11">
							<div>
								<el-text
									style="font-weight: bold; font-size: 25px"
								>
									留言板
								</el-text>
							</div>
						</el-col>
						<el-col :span="2" :offset="9">
							<div>
								<el-text type="info" tag="del">
									请畅所欲言吧！
								</el-text>
							</div>
						</el-col>
					</el-row>
					<el-row style="margin: 3vh 0">
						<el-col :offset="1" :span="1">
							<div
								style="
									border: 1px solid rgba(153, 153, 153, 0.2);
									background-color: rgba(220, 220, 220, 0.5);
									height: 70px;
									width: 70px;
								"
							>
								<el-image
									:src="userData.avatar"
									fit="fill"
									style="
										width: 70px;
										height: 70px;
										border-radius: 50%;
									"
								></el-image>
							</div>
						</el-col>
						<el-col
							:span="3"
							style="
								display: flex;
								flex-direction: column;
								margin-left: 1vw;
							"
						>
							<div style="margin-top: 0.5vh">
								<el-text
									size="large"
									style="
										font-weight: bold;
										display: flex;
										align-items: center;
									"
									truncated
								>
									<el-icon style="margin-right: 1vw"
										><UserFilled
									/></el-icon>
									{{ userData.nickname }}
								</el-text>
							</div>
							<div style="margin-top: 3vh; margin-bottom: 1vh">
								<el-text
									size="large"
									type="info"
									style="display: flex; align-items: center"
									truncated
								>
									{{ userData.notes }}
								</el-text>
							</div>
						</el-col>
						<el-col :span="14">
							<el-input
								v-model="commentText"
								:rows="2"
								type="textarea"
								placeholder="Please input"
							/>
						</el-col>
						<el-col :span="3" :offset="1">
							<el-button
								type="success"
								style="
									width: 100%;
									height: 92%;
									font-size: 20px;
								"
								@click="addBoardComment"
								>发送</el-button
							>
						</el-col>
					</el-row>
				</template>
				<el-row v-for="(item, index) in boardCommentorMsg" :key="index">
					<el-col
						:span="22"
						:offset="1"
						style="
							border-top: 1px solid rgba(200, 200, 200, 0.5);
							border-left: 1px solid rgba(200, 200, 200, 0.5);
							border-right: 1px solid rgba(200, 200, 200, 0.5);
						"
					>
						<div
							style="
								display: flex;
								align-items: center;
								position: relative;
							"
						>
							<div
								style="
									border: 1px solid rgba(153, 153, 153, 0.2);
									background-color: rgba(220, 220, 220, 0.5);
								"
							>
								<el-image
									:src="item.avatar"
									fit="fill"
									style="
										height: 50px;
										width: 50px;
										border-radius: 50%;
									"
								></el-image>
							</div>
							<div
								style="
									display: flex;
									flex-direction: column;
									margin-left: 1vw;
								"
							>
								<div style="margin: 1vh 0">
									<el-text style="font-weight: bold">
										<el-icon>
											<Avatar />
										</el-icon>
										{{ item.nickname }}
									</el-text>
								</div>
								<div style="margin: 1vh 0">
									<el-text type="info">
										{{ item.notes }}
									</el-text>
								</div>
							</div>
							<div
								style="position: absolute; right: 3vw; top: 3vh"
							>
								<el-text
									type="primary"
									style="font-weight: bold"
								>
									{{ index + 1 }} 楼
								</el-text>
							</div>
						</div>
					</el-col>
					<el-col
						:span="22"
						:offset="1"
						style="
							border: 1px solid rgba(200, 200, 200, 0.5);
							min-height: 100px;
						"
					>
						<div style="margin: 1vh 1vw">
							<el-text>
								{{ boardCommentMsg[index].content }}
							</el-text>
						</div>
					</el-col>
					<el-divider v-if="index < boardCommentorMsg.length - 1">
						<el-icon><Comment /></el-icon>
					</el-divider>
				</el-row>
			</el-card>
			<div
				v-else
				style="display: flex; justify-content: center; width: 100vw"
			>
				<el-skeleton
					:rows="20"
					animated
					style="width: 85vw; height: 90vh; margin-top: 10vh"
				/>
			</div>
		</div>
		<pageFooter></pageFooter>
	</div>
</template>

<script setup>
import topNavigation from '../components/topNavigation.vue';
import pageFooter from '../components/pageFooter.vue';
import { useRouter } from 'vue-router';
import { onBeforeMount } from 'vue';
import axios from 'axios';
import getFile from '../utils/getAssetsFile';
import {
	Comment,
	StarFilled,
	UserFilled,
	Avatar,
	EditPen,
} from '@element-plus/icons-vue';
const router = useRouter();

const pageShow = ref(false);
const userData = ref(null);
const commentText = ref('');
const boardCommentMsg = ref(null);
const boardCommentorMsg = ref([]);

const addBoardComment = async () => {
	/*
        req.body.content &&
		req.body.commentator &&
		req.body.reviewee &&
		req.body.blogId
    */
	if (commentText.value) {
		try {
			const res = await axios({
				baseURL: 'http://localhost:5000',
				url: '/addBlogComment',
				method: 'post',
				data: {
					content: commentText.value,
					commentator: localStorage.getItem('username'),
					reviewee: '#board#',
					blogId: 0,
				},
			});
			if (res.data.state === 'error') {
				return ElNotification({
					title: 'Error',
					message: '服务器错误',
					type: 'error',
				});
			} else {
				ElNotification({
					title: 'Success',
					message: '评论成功',
					type: 'success',
				});
				return location.reload();
			}
		} catch (error) {
			console.log(error);
			return ElNotification({
				title: 'Error',
				message: '请检查本地网络',
				type: 'error',
			});
		}
	} else {
		return ElNotification({
			title: 'Warning',
			message: '评论不能为空哦',
			type: 'warning',
		});
	}
};

const linkMsg = ref([
	{
		linkName: '文章',
		linkMethod: () => {
			router.push('/article');
		},
	},
	{
		linkName: '发现',
		linkMethod: () => {
			router.push('/discover');
		},
	},
	{
		linkName: '留言板',
		linkMethod: () => {
			router.push('/board');
		},
	},
]);
onBeforeMount(async () => {
	let username = localStorage.getItem('username');
	if (!username) {
		setTimeout(() => {
			router.push('/login');
		}, 2000);
		return;
	}
	//获取个人信息
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getUserMsg',
			method: 'post',
			data: {
				state: 'basedUsername',
				username,
			},
		});
		if (res.data.state === 'error') {
			console.log(1);
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else {
			userData.value = res.data.data;
			if (
				!userData.value.nickname ||
				userData.value.nickname === 'null'
			) {
				userData.value.nickname = `新用户${userData.value.id}号`;
			}
			if (!userData.value.avatar || userData.value.avatar === 'null') {
				userData.value.avatar = getFile.getAssetsFile(
					'img',
					'未登录头像.png'
				);
			}
			if (!userData.value.notes || userData.value.notes === 'null') {
				userData.value.notes = '这个人很懒...';
			}
			if (!userData.value.gender || userData.value.gender === 'null') {
				userData.value.gender = '保密';
			}
		}
	} catch (error) {
		console.log(2);
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	//获取留言板评论信息
	try {
		const res = await axios({
			baseURL: 'http://localhost:5000',
			url: '/getBlogComment',
			method: 'post',
			data: {
				blogId: 0,
			},
		});
		if (res.data.state === 'error') {
			ElNotification({
				title: 'Error',
				message: '服务器错误',
				type: 'error',
			});
		} else if (res.data.state === 'none') {
			boardCommentorMsg.value = null;
		} else {
			boardCommentMsg.value = res.data.data;
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	//获取评论者信息
	try {
		if (boardCommentorMsg.value !== null) {
			for (let item of boardCommentMsg.value) {
				const res = await axios({
					baseURL: 'http://localhost:5000',
					url: '/getUserMsg',
					method: 'post',
					data: {
						state: 'basedUsername',
						username: item.commentator,
					},
				});
				if (res.data.state === 'error') {
					ElNotification({
						title: 'Error',
						message: '服务器错误',
						type: 'error',
					});
				} else {
					boardCommentorMsg.value.push(res.data.data);
				}
			}
		}
	} catch (error) {
		console.log(error);
		ElNotification({
			title: 'Error',
			message: '请检查本地网络',
			type: 'error',
		});
	}
	pageShow.value = true;
});
</script>

<style scoped>
.perspectiveUpReturn {
	animation-duration: 1s;
}
</style>
